<template>
    <div id="comment" v-if="Object.keys(message).length !== 0">
        <h4>商品评价</h4>
        <span class="more">更多</span>
        <div class="user_comment">
            <div class="user">
                <img :src="message.list[0].user.avatar" alt="" class="user_img">
                <span class="uName">{{message.list[0].user.uname}}</span>
            </div>
            <img class="comment_img" v-for="(item,index) in message.list[0].images"
                 :src="item" :key="index" alt="">
            <p class="comment">{{message.list[0].content}}</p>
            <p class="user_style">{{message.list[0].style}}</p>
            <p class="time">{{message.list[0].created | showTime}}</p>
        </div>
    </div>
</template>

<script>
    import  {formatDate} from "../../../network/details";
    export default {
        name: "DetailComment",
        props:{
            message:{}
    },
        filters:{
            showTime(value){
                const date = new Date(value * 1000);
             return formatDate(date,'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>

<style scoped>
    #comment{
        padding-top: 15px;
        border-top: 3px gainsboro solid;
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom: 3px gainsboro solid;
    }
    #comment h4{
        margin-left: 10px;
        font-style: italic;
        display: inline-block;
    }
    .more{
        margin-left: 210px;
        font-size: 12px;
    }
    .user_comment{
        margin-top: 15px;
    }
    .user{
        height: 50px;
    }
    .user_img{
        margin-left: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .uName{
        margin-left: 10px;
        position: relative;
        top: -13px;
    }
    .comment_img{
        width: 70px;
        height:70px;
        display: inline-block;
        margin-left: 15px;
    }
    .comment{
        font-size: 11px;
        padding: 0 5px;
        top: 150px;
        text-indent: 2em;
    }
    .user_style{
        margin-top:10px;
        font-size: 10px;
        color: silver;
        margin-left: 24px;
    }
    .time{
        margin-top: 8px;
        margin-left: 65%;
        color: silver;
        font-size: 12px;
    }
</style>